<script setup lang="ts">
  import { ref } from 'vue'

  const historyColors = ref<string[]>([])

  const handleChange = (v) => {
    historyColors.value.push(v)
  }
</script>
<template>
  <div style="padding: 30vw; display: flex">
    <ColorPicker format="hex8" defaultValue="#000" showText>
      <template #extra="{ color }">
        {{ color }}
      </template>
    </ColorPicker>
    <ColorPickerPanel
      style="margin-left: 20px"
      format="hex8"
      defaultValue="#000"
      :presets="[
        { title: '最近使用颜色', colors: historyColors },
        {
          title: '系统预设颜色',
          colors: [
            '#00B42A',
            '#3C7EFF',
            '#FF7D00',
            '#F76965',
            '#F7BA1E',
            '#F5319D',
            '#D91AD9',
            '#9FDB1D',
            '#FADC19',
            '#722ED1',
            '#3491FA',
            '#7BE188',
            '#93BEFF',
            '#FFCF8B',
            '#FBB0A7',
            '#FCE996',
            '#FB9DC7',
            '#F08EE6',
            '#DCF190',
            '#FDFA94',
            '#C396ED',
            '#9FD4FD',
          ],
        },
      ]"
      @change="handleChange"
    >
      <template #default="{ color }">
        {{ color }}
      </template>
    </ColorPickerPanel>
  </div>
</template>
